<template>
    <div class="sidebar">
        <h2 class="logo">学习预警系统</h2>
        <el-menu 
            :default-active="activeIndex" 
            class="nav-menu" 
            background-color="#545c64" 
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="/student" @click="toyemian('/student')">
                <img src="../assets/images/学生管理.png" class="menu-icon" alt="学生管理图标">
                <span>学生管理</span>
            </el-menu-item>
            <el-sub-menu index="/warn">
              <template #title>
                <img src="../assets/images/预警管理.png" class="menu-icon" alt="预警记录图标">
                <span>预警记录</span>
              </template>
              <el-menu-item index="/warn" @click="toyemian('/warn')">
                <img src="../assets/images/综合预警.png" class="menu-icon" alt="综合预警图标">
                <span>综合预警</span>
              </el-menu-item>
              <el-menu-item index="/gradeWarn" @click="toyemian('/gradeWarn')">
                <img src="../assets/images/成绩预警.png" class="menu-icon" alt="成绩预警图标">
                <span>成绩预警</span>
              </el-menu-item>
            </el-sub-menu>
            <!-- <el-menu-item index="/evaluate"  @click="toyemian('/evaluate')">
                <img src="../assets/images/评估管理.png" class="menu-icon" alt="评估管理图标">
                <span>评估管理</span>
            </el-menu-item> -->
            <el-sub-menu index="/evaluate">
              <template #title>
                <img src="../assets/images/评估管理.png" class="menu-icon" alt="评估管理">
                <span>评估管理</span>
              </template>
              <el-menu-item index="/evaluate" @click="toyemian('/evaluate')">
                <img src="../assets/images/综合信息.png" class="menu-icon" alt="综合预警图标">
                <span>综合信息</span>
              </el-menu-item>
              <el-menu-item index="/assessment" @click="toyemian('/assessment')">
                <img src="../assets/images/评估记录.png" class="menu-icon" alt="成绩预警图标">
                <span>评估记录</span>
              </el-menu-item>
              <el-menu-item index="/trend" @click="toyemian('/trend')">
                <img src="../assets/images/评估趋势.png" class="menu-icon" alt="成绩预警图标">
                <span>评估趋势</span>
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/courseManage"  @click="toyemian('/courseManage')">
                <img src="../assets/images/课程管理.png" class="menu-icon" alt="课程管理图标">
                <span>课程管理</span>
            </el-menu-item>
        </el-menu>
    </div>
            <div class="top-bar">
                <div class="left-section">
                    <div class="welcome-text">欢迎学习预警系统</div>
                </div>
                <div class="right-section">
                    <el-dropdown @command="handleCommand">
                        <span class="user-info">
                            <span class="username">欢迎！{{teacher.tName}}</span>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>个人中心</el-dropdown-item>
                                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
    </template>
    
    <script>
    import { reactive, toRefs } from 'vue';
    import { useRouter, useRoute } from "vue-router";
    import {getSessionStorage, removeSessionStorage} from '../router/common';
    import websocketService from '../utils/websocket';
    
    export default {
      setup() {
        const router = useRouter();
        const route = useRoute();
        const state = reactive({
          activeIndex: route.path,
          teacher:getSessionStorage('teacher')
        })
        function toyemian(path) {
          router.push(path)
        }
    
        function handleCommand(command) {
          if (command === 'logout') {
            // 断开WebSocket连接
            websocketService.disconnect();
            // 清除session存储
            removeSessionStorage('token');
            removeSessionStorage('teacher');
            // 跳转到登录页
            router.push('/');
          }
        }
    
        return {
            ...toRefs(state),
            toyemian,
            handleCommand
        }
      }
    }
    </script>
    
    <style scoped>
    .main-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
    }
    
    .sidebar {
        width: 220px;
        background-color: #545c64;
        color: white;
        height: 100vh;
        position: fixed;
        left: 0;
        overflow-y: auto;
    }
    
    .logo {
        text-align: center;
        padding: 20px 0;
        color: #fff;
        margin: 0;
    }
    
    .nav-menu {
        border-right: none;
    }
    .top-bar {
        height: 60px;
        background-color: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        position: fixed;
        top: 0;
        right: 0;
        left: 220px; /* 与侧边栏宽度一致 */
        z-index: 100;
    }
    
    .left-section {
        display: flex;
        align-items: center;
    }
    
    .welcome-text {
        font-size: 18px;
        font-weight: bold;
        color: #333;
    }
    
    .right-section {
        display: flex;
        align-items: center;
    }
    
    .user-info {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    
    .username {
        margin-left: 10px;
        font-size: 14px;
    }
    .menu-icon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        vertical-align: middle;
    }
    </style>